<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>欢迎使用领捷智慧物流管理系统</title>
  <link rel="hshortcut icon" href="../static/img/own/head.png"/>
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
  <link rel="stylesheet" href="/static/fonts/fontawesome-all.min.css">
  <link rel="stylesheet" href="/static/css/animate.min.css">
</head>

<body id="page-top">
<div id="wrapper">
  <div class="d-flex flex-column" id="content-wrapper">
    <div id="content">
      <div class="container" style="min-width: 100%;width: 1162.4px;padding-top: 3px;padding-right: 24px;padding-bottom: 12px;padding-left: 24px;">
        <div class="card row" style="margin: 0px;">
          <div class="card-body border rounded" style="height: 89px;min-width: 0px;padding: 24px;padding-top: 23px;margin: 0px;margin-top: 0px;width: auto;">
            <div class="row" style="width: 500px;">

              <div class="col" style="width: auto;">
                <div class="dropdown text-xl-center" style="text-align: left;">
                  <span class="d-inline-flex justify-content-center" id="housenameSpan" style="font-size: 30px;font-weight: bold;color: rgb(0,0,0);width: auto;height: auto;"></span>
                  <input type="hidden" id="housename" th:value="${housename}">
                </div>
              </div>
              <div class="col" style="width: auto;">
                <div class="btn-group" role="group" style="padding-left: 1px;">
                  <button class="btn btn-primary" type="button" id="editWarehouse">编辑仓库</button>
                  <button class="btn btn-primary" type="button" style="margin-left: 5px;" id="addShelf">添加货架</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 100%;">
        <div class="container-fluid">
          <div class="card shadow" style="background: rgba(255,255,255,0.1);">
            <div class="card-header py-3" style="height: 75px;">
              <div class="row" style="width: auto;height: auto;">
                <div class="col d-inline-flex flex-column justify-content-center"><span class="d-inline-flex justify-content-center" style="font-size: 30px;font-weight: bold;color: rgb(0,0,0);width: auto;height: auto;">库位分布<span class="align-self-center" style="margin-left: 1%;background: #369fff;font-size: 20px;text-align: center;width: 61px;">有库存</span>
                                <span
                                        class="d-inline-flex flex-column align-self-center" style="margin-left: 1%;background: #858796;font-size: 20px;width: 67px;height: 29.6px;text-align: center;max-width: none;">无库存</span>
                                    </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div role="tablist" id="accordion-1">
                  <input type="hidden" id="houseid" th:value="${houseid}">

<!--                模态框-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">存放详情</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      </div>
                      <div class="modal-body">
                        <table style="text-align: center">
                          <thead>
                          <tr>
                            <th width="200px">商品编号</th>
                            <th width="200px">存放数量</th>
                          </tr>
                          </thead>
                          <tbody id="seatInfo">

                          </tbody>
                        </table>
                      </div>
<!--                      <div class="modal-footer">-->
<!--                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
<!--                        <button type="button" class="btn btn-primary">Save changes</button>-->
<!--                      </div>-->
                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="bg-white sticky-footer">
      <div class="container my-auto">
        <div class="text-center my-auto copyright"><span>鄂ICP备2021022432号</span></div>
      </div>
    </footer>
</div>
  <a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/chart.min.js"></script>
<script src="/static/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="/static/js/script.min.js"></script>
<script src="/static/js/theme.js"></script>
<script src="/static/js/jquery.session.js"></script>

<script>
  $(document).ready(function (){
    var houseid = $("#houseid").val();
    var housename = $("#housename").val();
    $("#housenameSpan").text(housename);
    $.ajax({
      url: "/warehouse/findAllShelf",
      type: 'post',
      data:{"houseid":houseid},
      dataType:"json",
      success:function (result){
        let str = "";
        for(let i = 0; i < result.length; i++){
          str += "<div class=\"card package\" style=\"min-width: auto;min-height: auto;background: rgba(255,255,255,0.1);\">\n" +
                  "                  <div class=\"card-header\" role=\"tab\" style=\"width: 100%;background: rgba(248,249,252,0);\">\n" +
                  "                    <h5 class=\"mb-0\"><a class=\"text-left d-inline-flex\" data-toggle=\"collapse\" aria-expanded=\"false\" aria-controls=\"accordion-1 .item-"+i+"\" href=\"#accordion-1 .item-"+i+"\" style=\"width: 100%;height: 100%;background: rgba(248,249,252,0);text-decoration:none;\">"+ result[i].pianqu +"区</a></h5>\n" +
                  "                  </div>\n" +
                  "                  <div class=\"collapse item-"+i+" border rounded flex-wrap\" role=\"tabpanel\" data-parent=\"#accordion-1\" style=\"padding-left: 2%;\">\n" +
                  "                    <div class=\"card-body\">";
                  for(let j = 0; j < result[i].shelfList.length; j++){
                    if(result[i].shelfList[j].shelfstate == 1){
                      str += "<button class=\"btn btn-primary text-center border rounded haveGoods\" data-toggle=\"modal\" data-target=\"#myModal\" data-bs-hover-animate=\"pulse\" type=\"button\" style=\"width: 100px;height: 50px;background: #369fff;color: rgb(0,0,0);margin: 5px;\">"+result[i].shelfList[j].shelfid+"</button>";
                    }else{
                      str += "<button class=\"btn btn-primary text-center border rounded\" data-bs-hover-animate=\"pulse\" type=\"button\" style=\"width: 100px;height: 50px;background: #858796;color: rgb(0,0,0);margin: 5px;\">"+result[i].shelfList[j].shelfid+"</button>"
                    }
                  }
          str +=  "                  </div>\n" +
                  "                </div>"
        }
        $("#accordion-1").append(str);
      }
    })
  })


  //编辑仓库
  $(function (){
    $("#editWarehouse").on("click",function (){
      var houseid = $("#houseid").val();
      var housename = $("#housename").val();
      $(location).attr("href","/warehouse/toUpdateWarehouse?houseid="+houseid+"&housename="+housename);
    })
  })

  //添加货架
  $(function (){
    $("#addShelf").on("click",function (){
      var houseid = $("#houseid").val();
      var housename = $("#housename").val();
      $(location).attr("href","/shelf/toAddShelf?houseid="+houseid+"&housename="+housename);
    })
  })

  //显示货架存放物品
  $(function (){
    $("body").on("click",".haveGoods",function (){
      var index = $(".haveGoods").index(this);
      var shelfid = $(".haveGoods").eq(index).text();
      var housename = $("#housename").val();
      $("#seatInfo").empty();
      $.ajax({
        url: "/goodsSeat/findAllGoodsByShelfIdAndHouseName",
        type: 'post',
        data:{"housename":housename,
              "shelfid":shelfid},
        dataType:"json",
        success:function (result){
          let str = "";
          for(let i = 0; i < result.length; i++){
            str +="<tr><td>" + result[i].goodsid +"</td>" +
                    "<td>" + result[i].seatnum + "</td></tr>";
          }
          $("#seatInfo").append(str);
        }
      })
    })
  })

  //session
  $.session.set("url",window.location.href);
</script>

</body>
</html>